<template>
	<view class="flex-col justify-start page">
		<view style="background-color:#fff;height:80rpx;position: fixed;width: 100%;">
			<view class="navigation">
				<view class="nav-item" :class="{ 'active': type === index }" v-for="(item,index) in items"
					@click="tabse(index)">
					<text> {{item}}</text>
					<view class="solid" v-if="type == index"> </view>
				</view>
			</view>
		</view>
		<view style="margin-top:80rpx;"> </view>

		<view class="flex-col justify-start group_3" style="background-color: #f4f5f7;">
			<view class="flex-col">
				<view class="flex-col justify-start group_5">
					<view class="flex-col list">
						<view class="flex-col mt-6 list-item" v-for="(item, index) in list" :key="index"
							@click="tab(item.order_id)">
								<view class="flex-row justify-between items-center " style="font-size: 28rpx;">
								<text class="font_6"  style="color: #000;">  订单号：{{item.order_id}}  </text>
							</view>
							<view style="height:20rpx;"> </view>

							<view class="flex-row justify-between items-center">
								<text class="font_4 text_10" style="width: 50% !important;"> {{item.moving_type_mes}}
									{{item.select_type_mes}} </text>
								<text class="font_3 text_1">
									<!-- {{ item.status == 0 ? '等待支付' : item.status == 1 ? '定金支付成功' : item.status == 2 ? '服务中' : item.status == 3 ? '已完成' : '已取消' }} -->

									{{item.status_mes}}
									<!-- {{item.status}} -->
								</text>


								<!-- <text>{{item.order_id}}</text> -->
								<!-- 								
								0 => '等待支付',        显示去支付按钮  和取消按钮
								        1 => '支付成功',     
								        2 => '服务中', 
								        3 => '完成',       显示  去评价 按钮
								        4 => '已取消',
								        5 => '已接单', -->

							</view>
							<view class="flex-row items-center mt-17-5" style=" overflow-wrap: break-word;">


								<view class="section_3"></view>

								<view class="">
									<view class="font_4" style="margin-left:3.5px;" v-if="item.out_address" >
										{{item.out_address.position.name}}
									</view>
									<view class="font_4  viese" style="width:666rpx !important;"  v-if="item.out_address"  >
										{{item.out_address.position.address}}{{item.out_address.floor}}{{yarray[item.out_address.index].title}}
									</view>
								</view>
							</view>


							<view class="flex-row items-center mt-17-5"
								v-if="item.in_address && item.in_address.length > 0" v-for="(it,idx) in item.in_address"
								:key="idx">
								<view class="section_4"></view>
								<!-- 	<text class="ml-12 font_4">
									{{ it && it.position ? it.position.name : '' }}
								</text> -->


								<view class="">
									<view class="font_4" style="margin-left:3.5px;">
										{{it.position.name}}


									</view>
									<view class="font_4  viese" style="width:666rpx  !important;">


										{{it.position.address}}{{it.floor}}{{yarray[it.index].title}}

									</view>
								</view>
							</view>
							
							
							
							
							<view class="flex-row justify-between items-center   mt-17-5">
								<text class="font_6"> 下单时间： {{item.create_date}}
							 
								</text>
								<view class="flex-row items-baseline self-stretch">
									<text class="font_6 text_8">定金支付金额：¥</text>
									<text class="ml-2 font_5 text_11">{{item.pay_amount}}</text>
								</view>
							 
							</view>
							
							
							
							
							
							
							<view class="flex-row justify-between items-center   mt-17-5">
								<text class="font_6"> 服务时间： {{item.moving_date}}
								<!-- （{{item.week_date}}） -->
								</text>
								<view class="flex-row items-baseline self-stretch">
									<text class="font_6 text_8">预估总金额：¥</text>
									<text class="ml-2 font_5 text_11">{{item.total_amount}}</text>
								</view>
							</view>

							<!--
															0 => '等待支付',        显示去支付按钮  和取消按钮
															        1 => '支付成功',     
															        2 => '服务中', 
															        3 => '完成',       显示  去评价 按钮
															        4 => '已取消',
															        5 => '已接单', -->


							<view class="flex-row justify-between items-center group_1 mt-17-5">
								<view class="flex-row items-baseline self-stretch" style="margin-left:auto;">
									<text class="anniubian" v-if="item.status == 0" @tap.stop="zhifu(index)"> 支付定金 </text>
									<text class="anniubian" v-if="item.status == 0" style="margin-left: 20rpx;"
										@tap.stop="quxiao(index)"> 取消 </text>
									<text class="anniubian" v-if="item.status == 3"> 去评价 </text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		listse,
		Cancel,
		Payment,
		FloorList
	} from '@/utils/user.js'

	export default {
		data() {
			return {
				items: ['全部', '待支付', '待服务', '服务中', '已完成', '已取消'],
				// 订单状态 0全部、 1:待支付、2:待服务、3:服务中、4:已完成、5:已取消
				type: 0,
				page: 1,
				list: {},
				pageCount: -1,

				yarray: [],
				arry: [],


			}
		},
		onLoad() {

			this.listfuction()
		},
		onShow() {
			this.listfuction()
		},
		onReachBottom() {

			this.page++

			// if (this.pageCount == -1) {


			// } else
			if (this.page <= this.pageCount) {

				this.listfuction()

				console.log("执行", this.page, this.pageCount)
			} else {

				uni.showToast({
					title: '没有更多数据',
					icon: 'none',
					duration: 1500
				})

			}


		},

		methods: {


			zhifu(i) {


				var params = this.list[i]
				debugger

				debugger
				// 将 params 对象转换为查询字符串
				const queryString =
					`id=${encodeURIComponent(params.order_id)}&pick=${encodeURIComponent(params.init_amount)}`;
				uni.navigateTo({
					url: '/pages/Orderconfirmation/Orderconfirmation?' + queryString
				});




			},
			// 取消订单
			quxiao(i) {
				console.log(i)



				uni.showModal({
					title: '提示',
					content: '您确定要取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							
							var data = {
								order_id: this.list[i].order_id
							}
							
							Cancel(data).then(res => {
								console.log(res)
								if (res.data.data.result) {
							
									uni.showToast({
										title: '取消成功',
										icon: 'none',
										duration: 2000
									})
							
									this.listfuction(0)
							
								}
							
							
							
							}).catch(error => {
								console.error('Cancel 方法执行出错：', error);
							});
						 


						} else if (res.cancel) {
							console.log('用户点击取消');
							// 在这里执行取消操作
						}
					}
				});
				
				
			


			},



			tabse(i) {

				this.list = []
				this.type = i
				this.page = 1

				this.pageCount = -1
				this.listfuction()
			},

			tab(i) {


				uni.navigateTo({
					url: '/pages/Orderdetails/Orderdetails?id=' + i
				})

			},

			listfuction(i) {



				FloorList().then(res => {
					console.log(res)

					this.yarray = Object.values(res.data.data);
					var arry = []
					this.yarray.forEach(function(obj) {
						arry.push(obj.title);
					});
					this.array = arry
				}).catch(error => {
					console.error('FloorList 方法执行出错：', error);
				});

				if (i == 0) {
					this.page = 1
				}



				var data = {
					status: this.type,
					page: this.page
				}

				listse(data).then(res => {

					console.log(res)




					if (this.page == 1) {
						this.list = res.data.data.list

						// .map(item => {
						// 	// 解析 in_address_json 字段

						// 	// 解析 out_address 字段
						// 	// item.in_address = JSON.parse(item.in_address);

						// 	// 如果 in_address_json 是一个数组，再次遍历每个元素进行解析
						// 	if (Array.isArray(item.in_address)) {
						// 		item.in_address.forEach(address => {
						// 			// 解析每个元素

						// 			address = JSON.parse(address);
						// 		});
						// 	}
						// 	return item; // 将处理后的对象返回
						// });
						// console.log(this.list)


					} else {


						var list1 = res.data.data.list
						// 	.map(item => {
						// 	// 解析 in_address_json 字段

						// 	item.in_address_json = JSON.parse(item.in_address_json);

						// 	// 解析 out_address 字段
						// 	item.out_address = JSON.parse(item.out_address);

						// 	// 如果 in_address_json 是一个数组，再次遍历每个元素进行解析
						// 	if (Array.isArray(item.in_address_json)) {
						// 		item.in_address_json.forEach(address => {
						// 			// 解析每个元素
						// 			address = JSON.parse(address);
						// 		});
						// 	}
						// 	return item; // 将处理后的对象返回
						// });





						this.list = [...this.list, ...list1]

					}


					this.pageCount = res.data.data.page.pageCount




				}).catch(error => {
					console.error('listse 方法执行出错：', error);
				});




			}

		}
	}
</script>

<style scoped>
	.viese {
		font-size: 26rpx !important;
		color: #666 !important;
		margin-top: 10rpx !important;
		margin-left: 3rpx !important;
	}

	.anniubian {
		font-size: 30rpx;
		color: #222;
		padding: 5rpx 20rpx;
		border-radius: 15rpx;
		margin-left: auto;
		border: 1rpx solid #2b8eff;
	}

	.active {
		color: #222222;
		font-weight: 550;
	}

	.navigation {
		display: flex;
		/* 	width: 80%; */
		background-color: #fff;
		margin: 0 auto;
	}

	.nav-item {
		flex: 1;
		text-align: center;
		line-height: 60rpx;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: rgb(102, 102, 102);
		font-family: "PingFang SC";

	}

	.solid {
		width: 70rpx;
		height: 6rpx;
		border-radius: 2rpx;
		background-color: rgb(43, 142, 255);
	}

	.mt-17-5 {
		margin-top: 35rpx;
	}


	.group_3 {
		overflow-y: auto;
	}

	.section {
		padding: 0 40rpx;
		background-color: #ffffff;
	}

	.group_4 {
		padding: 27.3rpx 0 27.94rpx 2.84rpx;
	}

	.text_5 {
		color: #222222;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 27.9rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 27.76rpx;
		color: #666666;
	}

	.text_6 {
		line-height: 27.84rpx;
	}

	.text_7 {
		line-height: 27.42rpx;
	}

	.section_2 {
		background-color: #2b8eff;
		border-radius: 1rpx;
		width: 60rpx;
		height: 6rpx;
	}


	.list {
		margin: 0 11rpx;
	}

	.list-item {
		padding: 30.16rpx 31rpx 31.42rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.42rpx;
		color: #ff772b;
	}

	.text_1 {
		margin-right: 3.92rpx;
		line-height: 22.48rpx;
	}

	.section_3 {
		background-color: #2b8eff;
		border-radius: 50%;
		width: 14rpx;
		height: 14rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.22rpx;
		color: #222222;

		width: 95% !important;
		line-height: 40rpx !important;
	}

	.text_10 {
		line-height: 25.98rpx;
	}

	.section_4 {
		background-color: #ff772b;
		border-radius: 50%;
		width: 14rpx;
		height: 14rpx;
	}

	.group_1 {
		padding-left: 38.7rpx;
		padding-right: 5.14rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.42rpx;
		color: #666666;
	}

	.text_8 {
		line-height: 22.08rpx;
	}

	.font_5 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 26.22rpx;
		color: #222222;
	}

	.text_11 {
		line-height: 26.72rpx;
	}

	.mt-17-5 {
		margin-top: 35rpx;
	}

	.page {
		/* padding-bottom: 149rpx; */
		background-color: #f4f5f7;
		width: 100%;

		height: 100vh;
	}



	.group_3 {
		overflow-y: auto;
	}

	.section {
		padding: 0 40rpx;
		background-color: #ffffff;
	}

	.group_4 {
		padding: 27.3rpx 0 27.94rpx 2.84rpx;
	}

	.text_5 {
		color: #222222;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 27.9rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 27.76rpx;
		color: #666666;
	}

	.text_6 {
		line-height: 27.84rpx;
	}

	.text_7 {
		line-height: 27.42rpx;
	}

	.section_2 {
		background-color: #2b8eff;
		border-radius: 1rpx;
		width: 60rpx;
		height: 6rpx;
	}

	/* 	.group_5 {
		padding: 12rpx 0 224rpx;
	} */

	.list {
		margin: 0 11rpx;
	}

	.list-item {
		padding: 30.16rpx 31rpx 31.42rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.42rpx;
		color: #ff772b;
	}

	.text_1 {
		margin-right: 3.92rpx;
		line-height: 22.48rpx;
	}

	.section_3 {
		background-color: #2b8eff;
		border-radius: 50%;
		width: 14rpx;
		height: 14rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26.22rpx;
		color: #222222;
	}

	.text_10 {
		line-height: 25.98rpx;
	}

	.section_4 {
		background-color: #ff772b;
		border-radius: 50%;
		width: 14rpx;
		height: 14rpx;
	}

	.group_1 {
		padding-left: 38.7rpx;
		padding-right: 5.14rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.42rpx;
		color: #666666;
	}

	.text_8 {
		line-height: 22.08rpx;
	}

	.font_5 {
		font-size: 36rpx;
		font-family: PingFang SC;
		line-height: 26.22rpx;
		color: #222222;
	}

	.text_11 {
		line-height: 26.72rpx;
	}
</style>